<template>
	<view class="Cluemanagement-box">
		<view class="Cluemanagement-top">
			<view class="Cluemanagement-top-Cluemanagement">线索管理</view>
			<view class="Cluemanagement-top-screen">
				<view class="Cluemanagement-top-screen1">
					<view class="Cluemanagement-top-screen-text" @click="openXs"><view style="width: 100%;">筛选条件内容</view><u-icon name="order" color="#92C25B" size="35"></u-icon></view>
					<view class="Cluemanagement-top-screen-tb" @click="Clueentry"><u-icon name="plus" color="#92C25B" size="35"></u-icon></view>
				</view>
			</view>
		</view>
		<view class="Cluemanagement-auto">
			<view class="Cluemanagement-auto-Afewclues">
				<view class="Cluemanagement-auto-Afewclues1">线索列表 {{ total }} 条</view>
				<view class="Cluemanagement-auto-tb"><u-icon name="photo" color="#999999" size="35"></u-icon></view>
				<view class="Cluemanagement-auto-tb1"><u-icon name="list-dot" color="#999999" size="35"></u-icon></view>
			</view>
			<view class="Cluemanagement-auto-datainformation">
				<!-- 未分发 -->
				<view class="Cluemanagement-auto-datainformation-completion spacing" v-for="(item, index) in list" :key="index"  @click="spacing(item.id)">
					<u-row gutter="16">
						<u-col span="9">
							<view class="name">学员ID：{{ item.unique_id }} {{ item.realname }}</view>
						</u-col>
						<u-col span="3">
							<view class="distribute"><image src="../../../static/ls.png" class="distribute-tb"></image>{{ item.status }}</view>
						</u-col>
					</u-row>
					<u-row gutter="16">
						<u-col span="12">
							<view class="region">{{ item.province_name }}-{{ item.city_name }}-{{ item.area_name }}</view>
						</u-col>
					</u-row>
					<u-row gutter="16">
						<u-col span="10">
							<view class="classification">{{ item.cate_name_one }}-{{ item.cate_name_two }}-{{ item.cate_name_three }}</view>
						</u-col>
						<u-col span="2">
							<view class="completion">补全<u-icon name="arrow-right" color="#92C05E" size="28"></u-icon></view>
						</u-col>
					</u-row>
					<u-row gutter="16" style="margin-top: 10upx;">
						<u-col span="6">
							<view class="time"><u-icon name="clock" color="#000000" size="28" style="margin-right: 5upx;"></u-icon>{{ item.first_time }}</view>
						</u-col>
						<u-col span="4">
							<view class="Electronicsales">{{ item.first_title }}</view>
						</u-col>
						<u-col span="2">
							
						</u-col>
					</u-row>
				</view>
				<!-- 已分发 -->
				<!-- <view class="Cluemanagement-auto-datainformation-Distributed spacing" v-for="item in 3" @click.stop="Distributed">
					<u-row gutter="16">
						<u-col span="9">
							<view class="name">学员ID：XS004 周晓明</view>
						</u-col>
						<u-col span="3">
							<view class="distribute"><image src="../../../static/ls.png" class="distribute-tb"></image>已分发</view>
						</u-col>
					</u-row>
					<u-row gutter="16">
						<u-col span="12">
							<view class="region">江西省-抚州市-临川区</view>
						</u-col>
					</u-row>
					<u-row gutter="16">
						<u-col span="10">
							<view class="classification">语言培训-通用英语-成人新概念英语</view>
						</u-col>
						<u-col span="2">
							<view class="completion"><u-icon name="arrow-right" color="#92C05E" size="28"></u-icon></view>
						</u-col>
					</u-row>
					<u-row gutter="16" style="margin-top: 10upx;">
						<u-col span="6">
							<view class="time"><u-icon name="clock" color="#000000" size="28" style="margin-right: 5upx;"></u-icon>2021.04.28 12:09:13</view>
						</u-col>
						<u-col span="4">
							<view class="Electronicsales">电销系统</view>
						</u-col>
						<u-col span="2">
							<view class="WorkorderIcon" @click.stop="Workordertb"><u-icon name="photo" color="#666666" size="30" style="margin-right: 10upx;"></u-icon>5</view>
						</u-col>
					</u-row>
				</view> -->
			</view>
		</view>
		<view class="Cluemanagement-bottom">
			<bottom/>
		</view>
		<popup ref="child" />
	</view>
</template>

<script>
	import popup from '../../../components/popup/schome.vue'
	import bottom from '../../../components/bottom-other/index.vue'
	export default {
		components:{ popup,bottom },
		data() {
			return {
				list: [],
				total: 0
			}
		},
		onLoad() {

		},
		mounted() {
			this.getList()
		},
		methods: {
			getList () {
				var param = {
					page: 1,
					limit: 10,
					create_time: '',
					source: '',
					category: '',
					send_time: '',
					city: '',
					unique_id: '',
					title: '',
					send_status: '',
					mobile: '',
					realname: ''
				}
				this.$request('', '/manageApi/v1/clueList', 'GET', param, {
				}).then(res => {
					this.list = res.data.data
					this.total = res.data.total
				})
			},
			openXs () {
				this.$refs.child.getOpen()
			},
			Clueentry() {
				uni.navigateTo({
					url: '/pages/market/Cluemanagement/Clueentry'
				})
			},
			Distributed(){
				uni.navigateTo({
					url: '/pages/market/Cluemanagement/Cluedetails'
				})
			},
			spacing(id) {
				uni.navigateTo({
					url: '/pages/market/Cluemanagement/Completeinformation?id=' + id
				})
			},
			Workordertb() {
				uni.navigateTo({
					url: '/pages/market/Workordermanagement/Workorderdetails'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.Cluemanagement-box{
		
	}
	.Cluemanagement-top{
		padding: 60upx 30upx;
		padding-bottom: 92upx;
		background-color: #92C25B;
	}
	.Cluemanagement-top-Cluemanagement{
		color: #fff;
		font-size: 30upx;
		margin-bottom: 50upx;
		text-align: center;
		letter-spacing: 2px;
	}
	.Cluemanagement-top-screen1{
		display: flex;
	}
	.Cluemanagement-top-screen-text{
		width: 85%;
		height: 88upx;
		color: #666666;
		font-size: 24upx;
		display: flex;
		align-items: center;
		padding: 25upx;
		border-radius: 10upx;
		background-color: #fff;
	}
	.Cluemanagement-top-screen-tb{
		width: 88upx;
		height: 88upx;
		margin-left: 20upx;
		background: #FFFFFF;
		border-radius: 10upx;
	}
	.Cluemanagement-top-screen-tb{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.Cluemanagement-auto{
		padding: 30upx;
		margin: 30upx;
		margin-top: -60upx;
		border-radius: 10upx;
		background-color: #fff;
		box-shadow: 0px 5px 20px 0px rgba(153, 153, 153, 0.7);
	}
	.Cluemanagement-auto-Afewclues{
		display: flex;
		justify-content: center;
	}
	.Cluemanagement-auto-Afewclues1{
		width: 100%;
		font-size: 30upx;
		font-weight: 500;
		color: #333333;
	}
	.Cluemanagement-auto-tb{
		display: flex;
		margin-left: 50upx;
		align-items: center;
		justify-content: center;
	}
	.Cluemanagement-auto-tb1{
		display: flex;
		margin-left: 50upx;
		align-items: center;
		justify-content: center;
	}
	.Cluemanagement-auto-datainformation{}
	.Cluemanagement-auto-datainformation-completion{
		background: rgba(146, 194, 91, 0.1);
		border: 1px solid #87B847;
	}
	.Cluemanagement-auto-datainformation-Distributed{
		border: 1px solid #DCDCDC;
	}
	.spacing{
		border-radius: 10upx;
		margin: 35upx 0;
		padding: 20upx;
	}
	.spacing:nth-last-child(1){
		margin-bottom: 0;
	}
	.name{
		font-size: 28upx;
		font-weight: bold;
		color: #333333;
	}
	.distribute{
		font-size: 24upx;
		font-weight: bold;
		color: #87B847;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.distribute-tb{
		width: 31upx;
		height: 24upx;
		margin-right: 8upx;
	}
	.region{
		font-size: 24upx;
		font-weight: 400;
		color: #666666;
		margin-top: 10upx;
		margin-bottom: 10upx;
	}
	.classification{
		font-size: 24upx;
		font-weight: 400;
		color: #666666;
		margin-bottom: 10upx;
	}
	.completion{
		font-size: 24upx;
		font-weight: bold;
		color: #87B847;
		margin-bottom: 10upx;
		text-align: right;
	}
	.time{
		font-size: 24upx;
		font-weight: 500;
		color: #333333;
	}
	.Electronicsales{
		width: 90%;
		font-size: 20upx;
		font-weight: 500;
		color: #F08200;
		padding: 5upx 10upx;
		border-radius: 8upx;
		text-align: center;
		background-color: #F4EDD6;
	}
	.WorkorderIcon{
		font-size: 24upx;
		font-weight: 500;
		color: #333333;
	}
	.Cluemanagement-bottom{
		
	}
</style>